<template>
  <div class="pagination" ref="page" v-show="total">
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="pageSelect"
      :page-size="pageSize"
      :layout="'prev,pager,next,slot,total' + (pageSelectShow ? ',sizes': '')"
      :total="total">
      <span class="page_number">
        <b class="page_NO">{{currentPage > sumPage ? sumPage : currentPage}}</b> / {{sumPage}}
      </span>
    </el-pagination>
    <div class="page_jump">
      <span>去第</span>
      <el-input-number ref="inputNumber" controls-position="right" :min="1" :max="sumPage"
                       v-model.trim.number="jumpPage"
                       @keyup.native.enter="jumpBtn" type="tel" size="mini"></el-input-number>
      <span>页</span>
    </div>
    <el-button size="mini" @click="jumpBtn">确定</el-button>
  </div>
</template>

<script>
export default {
  name: 'MesPagination',
  props: {
    currentPage: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 15
    },
    total: {
      type: Number,
      default: 1
    },
    pageSelectShow: {
      type: Boolean,
      default: true
    },
    morePage: {
      type: Array,
      defaultProps: []
    }
  },
  data() {
    return {
      jumpPage: '',
      pageSelect: [15, 30, 50, 100],
      isPage: true
    }
  },
  computed: {
    sumPage() {
      return Math.ceil(this.total / this.pageSize)
    },
  },
  watch: {
    sumPage(old, now) {
      if (old !== now) {
        this.isPage = true
      }
    }
  },
  mounted() {
    this.setPageSelect()
  },
  methods: {
    handleSizeChange(val) {
      let page = {
        pageSize: val,
        pageNo: 1
      }
      this.$emit('updateData', page)
      this.isPage = false
    },
    handleCurrentChange(val) {
      if (this.isPage === true) {
        let page = {
          pageSize: this.pageSize,
          pageNo: val
        }
        this.$emit('updateData', page)
      }
    },
    jumpBtn() {
      if (!/^[0-9]*[1-9][0-9]*$/.test(this.jumpPage)) {
        this.jumpPage = 1
      }
      if (this.jumpPage > this.sumPage) {
        this.jumpPage = this.sumPage
      }
      this.$refs.inputNumber.setCurrentValue(this.jumpPage)
      let page = {
        pageSize: this.pageSize,
        pageNo: this.jumpPage
      }
      this.$emit('updateData', page)
    },
    setPageSelect() {
      if (Array.isArray(this.morePage) && this.morePage.length > 0) {
        this.pageSelect = this.pageSelect.concat(this.morePage)
      }
    }
  }
}
</script>

<style>

</style>
